<template>
  <n-modal v-model:show="isVisible" title="编辑仓库信息" preset="dialog" @close="onClose" style="height: 400px;width: 500px">
    <n-form @submit.prevent="handleSubmit" label-width="120px" class="form-container">
      <div class="form-row" style="margin-top: 20px">
        <n-form-item label="仓库名称：" path="name">
          <n-input v-model:value="form.name" placeholder="请输入仓库名称" />
        </n-form-item>
        <n-form-item label="仓库地址：" path="address" style="margin-left: 10px">
          <n-input v-model:value="form.address" placeholder="请输入仓库地址" />
        </n-form-item>
      </div>
      <div class="form-row">
        <n-form-item label="仓库类型：" path="type">
          <n-select v-model:value="form.type"
                    :options="typeOptions"
                    placeholder="选择仓库类型"
                    style="width: 180px"
                    filterable />
        </n-form-item>

        <n-form-item label="负责人：" style="margin-left: 10px">
          <n-select
              v-model:value="form.storeManagerId"
              :options="admins"
              style="width: 180px"></n-select>
        </n-form-item>
      </div>

      <!-- 提交按钮 -->
      <div class="submit-row">
        <n-form-item>
          <n-button type="primary" native-type="submit" @click="handleSubmit">提交</n-button>
        </n-form-item>
      </div>
    </n-form>
  </n-modal>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue';
import { useUserStore } from "@/store/index.js";
import {useRouter} from 'vue-router';
import api from '@/api/admin.js';
import { List } from "echarts";

const userStore = useUserStore();
const id = userStore.getId();
const router = useRouter()
const loading = ref(true)
const option = ref([]);
const admins=ref([])

const emit = defineEmits(['updatePage']);
const props = defineProps({
  show1: {
    type: Boolean,
    required: true,
  },
  onClose: {
    type: Function,
    required: true,
  },
  option: {
    type: List,
    required: true,
  },
  store: {
    type: Object,
    required: true,
  }
});
const form = ref({
  name: '',
  address:'',
  type: '',
  storeManagerId:'',
});
const isVisible = ref(props.show1);
watch(() => props.show1, (newVal) => {
  isVisible.value = newVal;
  if (newVal) {
    form.value = { ...props.store };
  }
});


const typeOptions = [
	{ label: '本地仓', value: '本地仓' },
	{ label: '海外仓', value: '海外仓' },
	{ label: '平台仓', value: '平台仓' },
];
const handleSubmit = async () => {
  try {
    const res = await api.updateStore(form.value);  // 调用更新接口
    if (res.code === 200) {
      emit("updatePage");
    } else {
      $message.error(res.message);
    }
  } catch (err) {
    $message.error("更新失败！");
  } finally {
    clear();
    props.onClose();
  }
};
const queryAdminList = async () => {
  loading.value = true
  try {
	  const res = await api.findAdminByRole({
		  role: 'STOREADMIN'
	  })
    if(res.code === 200) {
      res.data.map((item)=>{
        admins.value.push({
          label: item.name,
          value: item.id
        })
      })
    }
    else {
      $message.error(res.message)
    }
  } catch (err) {
    $message.error("获取管理员信息失败！")
  }finally{
    loading.value = false
  }
}
onMounted(() => {
  queryAdminList()
})
const clear = () => {
  form.value = {
    id: null,
    categoryId: null,
    specification: '',
    color: '',
    material: '',
  };
};
</script>

<style scoped>
    .form-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        position: relative;
    }

    .form-row {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .form-row > n-form-item {
        flex: 1;
    }

    .submit-row {
        justify-content: center;
        display: flex;
        width: 100%;
    }
</style>
